<template>
    <div class="body">
    <div class="header">
    </div>
    <!-- g购物卡 -->
    <div class="six">
      <div
        class="oneD"
        @click="red('204,203,202,201,200')"
      >
        <div class="Ling"></div>
      </div>
      <ul>
        <li>
          <div class="btn">通用优惠券</div>
        </li>
        <li>
          <div class="btn">通用优惠券</div>
        </li>
        <li>
          <div class="btn">通用优惠券</div>
        </li>
        <li>
          <div class="btn">通用优惠券</div>
        </li>
      </ul>
    </div>
    <!-- 必买 -->
    <!-- <div class="much">
      <van-swipe
        :duration="700"
        :autoplay="5000"
        style="height:10.26667rem;"
        :show-indicators=false
      >
        <van-swipe-item
          v-for="item in list"
          :key="item.id"
        >
          <ul>
            <li
              v-for="itemr in item"
              :key="itemr.id"
              @click="nav(itemr.id)"
            >
              <div class="back">
                <img
                  class="one-hit"
                  v-lazy="itemr.goods_img"
                  :key="itemr.goods_img"
                >
              </div>

              <div class="text-one"> {{item.sell_name}}</div>
              <div class="money-Hot">¥
                <span>{{itemr.sale_price}}</span>
              </div>
              <img
                src="../../assets/img/new/cart@2x.png"
                class="cart"
                alt=""
              >
            </li>
          </ul>
        </van-swipe-item>
      </van-swipe>
    </div> -->
    <!-- title2 -->
    <!-- <div class="ordinary">
      <img
        class="image"
        src="../../assets/img/new/title3.png"
        alt=""
      >
      <vue-seamless-scroll
        class="Boedx"
        :data="lister"
        :class-option="defaultOption"
      >
        <ul>
          <li
            v-for="item in lister"
            :key="item.id"
            @click="nav(item.id)"
          >
            <div class="back">
              <img
                class="one-hit"
                :src="item.goods_img"
              >
            </div>

            <div class="text-one"> {{item.sell_name}}</div>
            <div class="money-Hot">¥
              <span>{{item.sale_price}}</span>
            </div>
            <div class="shop">
              立即购买
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
      <vue-seamless-scroll
        class="Boedx"
        :data="listdev"
        :class-option="defaultOptione"
      >
        <ul>
          <li
            v-for="item in listdev"
            :key="item.id"
            @click="nav(item.id)"
          >
            <div class="back">
              <img
                class="one-hit"
                :src="item.goods_img"
              >
            </div>

            <div class="text-one"> {{item.sell_name}}</div>
            <div class="money-Hot">¥
              <span>{{item.sale_price}}</span>
            </div>
            <div class="shop">
              立即购买
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div> -->
    <!-- 热销 -->
    <div class="Hot">
      <img
        class="image"
        src="../../assets/img/new/title4@2x.png"
        alt=""
      >
      <ul>
        <li
          v-for="item in atr"
          :key="item.goods_id"
          @click="nav(item.goods_id)"
        >
          <div class="back">
            <img
              class="one-hit"
              v-lazy="item.goods_img"
              :key="item.goods_img"
            >
          </div>

          <div class="text-one"> {{item.goods_name}}</div>
          <div class="money-Hot">¥
            <span>{{item.active_price}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 活动规则 -->
    <div
      class="rule"
      @click="onopen"
    >
      活动规则
    </div>
    <van-popup
      v-model="Fixed"
      class="boxed"
    >
      <div class="backgrend">
        <div class="gui">活动规则</div>
        <ul>
          <li>1、新人用户是指首次注册媛福达app商城或注册后未完成首单消费的用户；</li>
          <li>
            2、新人券包内含多张优惠券，总价值100元。仅限新人用户领取及使用，每人限领一次；
          </li>
          <li>
            3、优惠券仅限媛福达APP商城使用。爆款商品、活动商品、手机、平板等数码商品，以及线下门店无法使用；
          </li>
          <li>
            4、首单补贴为新人用户专属福利，每人限购一件首单补贴商品；
          </li>
          <li>5、如有任何疑问，请联系媛福达app商城在线客服。
          </li>
        </ul>
      </div>
      <div
        class="close"
        @click="closed"
      >我知道了</div>
    </van-popup>
    <img
      @click="ping"
      src="../../assets/img/new/title5@2x.png"
      class="images"
      alt=""
    >
    <!-- 微信遮罩 -->
    <div
      @touchmove.prevent
      class="rigth"
      v-if="show"
    >
      <img
        src="../../assets/img/wei_20210307160153.png"
        alt=""
      >
    </div>
    <!-- 置顶 -->
    <div
      class="totop"
      id="totop"
      @click="backTop"
      v-show="btnFlag"
    >
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
    <div class="banner">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        alt=""
      >
      <img
        src="../../assets/img/share/yuan.png"
        class="imgtwo"
        alt=""
      >
      <span class="spanone">打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div
        class="btn"
        @click="Gone"
      >下载</div>
      <!-- @click="Gonext" -->
      <div
        id="wekupButton"
        class="btn"
      >打开</div>
    </div>
  </div>
</template>

<script>
import bridge from '../../js/js1'
import { index, Coupondev, NewPeople, getNewData, NewHot } from '@/api/index'
import { share } from '../../js/wechat'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
import vueSeamlessScroll from "vue-seamless-scroll"; // 无缝滚动
// import Vconsole from "vconsole";
// const vConsole = new Vconsole();
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      list: [],
      lister: [],
      listdev: [],
      show: false,
      system: getSystem(),
      atr: [],
      atrdev: [],
      listerdev: [],
      share: true,
      scrollTop: 0,
      btnFlag: false,
      showTips: false,
      Fixed: false, // 活动规则弹窗
      id: ''
    }
  },
  components: {
    vueSeamlessScroll,
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop);
  },
  // 计算属性
  computed: {
    defaultOption () {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    defaultOptione () {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 3, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.create()
    this.system = getSystem()
    if (this.system.wechat) this.showTips = true
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([{
          id: 'usr1anivh5aa8uq6', // 后台生成的裂变活动LinkID
          data: {
            path: 'webview',
            webUrl: 'https://download.yuanfuda933.com/h5/other2.html#/newe',// 活动地址
            andUrl: 'https://download.yuanfuda933.com/h5/other2.html#/newe'// 活动地址
            // extraData: `{id:${this.id},uid:${this.uid}`,
            // extraData: {
            //   id: this.id,
            //   uid: this.uid,
            //   tid: this.tid
            // }
          }, /* 自定义参数，选填 */
          selector: '#wekupButton',
          useOpenInBrowerTips: 'default',
          proxyOpenDownload: function (defaultAction, LinkInstance) {
            window.location.href = LinkInstance.solution.downloadUrl
          }
        }])
      }
    } else {
      this.getToken(token => {
        this.$store.commit('setUser', token)
      })
    }
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    this.toph()
    this.Token()
    window.addEventListener('scroll', this.scrollToTop)
    share({
      title: '媛福达APP商城新人福利',
      desc: '首单补贴2.5元起，100元新人见面礼等你来领~',
      imgUrl: 'https://download.yuanfuda933.com/h5/images/xin.png',
      shareUrl: 'https://download.yuanfuda933.com/h5/other2.html#/new',
    })
  },
  // 组件方法
  methods: {
    // 领取优惠价
    red (id) {
      const tokend = this.$store.state.user.token
      const system = getSystem()
      if (tokend) {
        console.log(this.id);
        if (this.id == 1 && this.id != '') {
          // this.$toast('领取成功')
          this.Getcd(id)
        } else {
          this.$toast('不是新用户无法领取！')
        }
      } else {
        this.$toast("请先登录App！");
        if (system.android) {
          console.log('and 登录')
          bridge.dsCall('h5Login', '', e => {
            callback(e)
          })
        }
        if (system.iOS) {
          console.log('ios 登录')
          bridge.iosCall('h5Login', '', e => {
            callback(e)
          })
        }
      }
    },
    // 规则弹窗
    onopen () {
      this.Fixed = true
    },
    // 关闭
    closed () {
      this.Fixed = false
    },
    toph () {
      if (this.system.wechat) {
        this.show = true
        return false
      } else {
        this.show = false
      }
    },
    Gone () {
      if (this.system.iOS) {
        this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
      } else if (this.system.android) {
        window.location.href = 'https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk'
      }
    },
    ping () {
      if (this.system.wechat) {
        this.show = true
        return false
      } else {
        this.show = false
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
        return false
      }
      window.location.href = 'yfd://yfdmall:8080/homePage'
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    // 获取token
    Token () {
      this.getToken(token => {
        this.$store.commit('setUser', token)
      })
      let that = this
      setTimeout(function () {
        that.News()
        that.NewP()
      }, 500)
      const tokened = this.$store.state.user.token
      console.log(tokened);
    },
    getToken (callback) {
      const system = getSystem()
      if (system.android) {
        bridge.dsCall('getToken', '', res => {
          if (typeof res === 'string') res = JSON.parse(res)
          callback(res)
        })
        return
      }
      if (system.iOS) {
        bridge.iosReg('myTokenmethd', res => {
          const token = parseKeyValue(res)
          // const token = qs.parse(res)
          callback(token)
        })
        bridge.iosCall('getToken', '', res => { })
      }
    },
    async create () {
      try {
        const res = await index({
          id: 156
        })
        console.log(res.data.data.types);
        this.atr = res.data.data.types[0].goods
      } catch (err) {
        console.log('错误');
      }
    },
    // 获取商品
    News () {
      const did = this.$store.state.user.did
      const system = getSystem()
      if (system.yfd) {
        if (did) {
          getNewData({
          }).then(res => {
            var atrdev = res.data.data.special_goods
            var resultdev = []
            for (var i = 0; i < atrdev.length; i += 6) {
              resultdev.push(atrdev.slice(i, i + 6));
            }
            this.list = resultdev // 爆品
            this.lister = res.data.data.general_goods.slice(0, 12) // 普品
            this.listdev = res.data.data.general_goods.slice(12, 40)
            // console.log(res.data.data.general_goods); // 普品
            // console.log(res.data.data.special_goods); // 爆品
            // this.$toast('获取成功！');
          }).catch(res => {
            console.log(res);
            console.log('获取失败');
          })
          // } else {
          //   this.$toast("领取失败，请先登录！");
          //   if (system.android) {
          //     console.log('and 登录')
          //     bridge.dsCall('h5Login', '', e => {
          //       callback(e)
          //     })
          //   }
          //   if (system.iOS) {
          //     console.log('ios 登录')
          //     bridge.iosCall('h5Login', '', e => {
          //       callback(e)
          //     })
          //   }
        }
      } else {
        // this.$toast("请先登录APP！");
      }
    },
    // 判断是否新人
    NewP () {
      const tokend = this.$store.state.user.token
      const system = getSystem()
      if (system.yfd) {
        if (tokend) {
          NewPeople({
          }).then(res => {
            this.id = res.data.data.is_new_user
            // console.log(res.data.data.is_new_user);
            // this.$toast('成功！');
          }).catch(res => {
            console.log(res);
            console.log('失败');
          })
        }
      } else {
        // this.$toast("请先登录APP！");
      }
    },
    // 领取优惠卷
    Getcd (id) {
      // console.log(id + '12');
      NewHot({
        ids: id
      }).then(res => {
        console.log(res);
        if (res.data.err_code == 0) {
          this.$toast('已领取！');
        } else {
          return this.$toast(res.data.msg);
        }
      }).catch(res => {
        console.log(res);
        console.log('领取失败！');
      })
    },
    // 跳转下载
    nav (item) {
      if (this.system.wechat) {
        this.show = true
        return false
      } else {
        this.show = false
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
        return false
      }
      if (this.system.android) {
        openApp({
          query: { spuId: item }
        })
      }
      if (this.system.iOS) this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')

    },
    href (uri, blank = true) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = uri
      if (blank) a.setAttribute('target', '_blank')
      document.body.appendChild(a)
      a.click()
      setTimeout(t => {
        document.body.removeChild(a)
      }, 0)
    },
  }
}
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 160.066667rem;
  background: #ffb94f;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .moy {
    width: 2.746667rem;
    height: 0.613333rem;
    margin: 0.266667rem auto;
    border-radius: 0.4rem;
    font-size: 0.373333rem;
    color: #ff0000;
    text-align: center;
    line-height: 0.61rem;
    border: 0.026667rem solid#FFFFFF;
    background: -webkit-linear-gradient(top, #fcd073, #f6dba4);
  }
  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 1px 5px 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .banner {
    z-index: 99;
    position: fixed;
    top: 0%;
    width: 10rem;
    height: 2.28rem;
    background: #000000;
    display: flex;
    .imgone {
      display: block;
      margin: auto 0.293333rem;
      width: 0.586667rem;
      height: 0.586667rem;
    }
    .imgtwo {
      display: block;
      margin: auto 0.266667rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    .spanone {
      margin: auto 0.066667rem;
      width: 3.2rem;
      height: 1.453333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      .spantwo {
        font-size: 0.32rem;
        font-size: #9b9b9b;
        color: #9b9b9b;
      }
    }
    .btn {
      width: 1.633333rem;
      height: 0.906667rem;
      background: #ea0462;
      border-radius: 0.133333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.906667rem;
      margin: auto 0.1rem;
    }
  }
  .rigth {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 10rem;
    height: 30rem;
    background-color: #1e1e1e;
    opacity: 0.8;
  }
  .rigth img {
    width: 8rem;
    height: 4.4rem;
    float: right;
  }
  .header {
    background: url("../../assets/img/new/header.png") no-repeat;
    background-size: contain;
    width: 10rem;
    height: 8.026667rem;
  }
  // g购物卡
  .six {
    width: 10rem;
    height: 9.013333rem;
    background: url("../../assets/img/new/title1@2x.png") no-repeat;
    background-size: contain;
    box-sizing: border-box;
    margin: 0rem auto;
    padding-top: 1.52rem;
    border-radius: 0.266667rem;
    .oneD {
      width: 9.173333rem;
      height: 2.213333rem;
      margin: 0 auto 0.106667rem;
      background: url("../../assets/img/new/cd1.png") no-repeat;
      background-size: contain;
      .Ling {
        float: right;
        margin-top: 0.293333rem;
        margin-right: 0.266667rem;
        width: 1.6rem;
        height: 1.6rem;
        background: url("../../assets/img/new/ling.png") no-repeat;
        background-size: contain;
      }
    }
    ul {
      margin-left: 0.41333rem;
      li {
        // margin-left: 0.25333rem;
        width: 4.586667rem;
        height: 2.213333rem;
        float: left;
        .btn {
          width: 2.88rem;
          height: 0.453333rem;
          border-radius: 0.3rem;
          margin: 1.63rem 0.8rem 0 0.84rem;
          font-weight: 600;
          font-size: 0.32rem;
          background: #f56840;
          color: #ffffff;
          text-align: center;
          line-height: 0.4853333rem;
          // animation: mymove 2s infinite;
          // -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
          // animation-direction: alternate; /*轮流反向播放动画。*/
          // animation-timing-function: ease-in-out; /*动画的速度曲线*/
          // /* Safari 和 Chrome */
          // -webkit-animation: mymove 2s infinite;
          // -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        }
      }
      li:nth-child(1) {
        background: url("../../assets/img/new/cd2.png") no-repeat;
        background-size: contain;
      }
      li:nth-child(2) {
        background: url("../../assets/img/new/cd3.png") no-repeat;
        background-size: contain;
      }
      li:nth-child(3) {
        background: url("../../assets/img/new/cd4.png") no-repeat;
        background-size: contain;
      }
      li:nth-child(4) {
        background: url("../../assets/img/new/cd5.png") no-repeat;
        background-size: contain;
      }
    }
  }
  .images {
    width: 10rem;
    height: 1.093333rem;
    margin: 0 auto 0.4rem;
  }
  .Title {
    width: 10rem;
    height: 1.173333rem;
  }
  .much {
    width: 10rem;
    height: 12.88rem;
    background: url("../../assets/img/new/title2@2x.png") no-repeat;
    background-size: contain;
    margin: 0 auto 0.266667rem;
    border-radius: 0.266667rem;
    padding-top: 2.08rem;
    padding-left: 0.18rem;
    box-sizing: border-box;
    .van-swipe {
      width: 9.6rem;
      margin-left: 0.06rem;
      overflow: hidden;
    }
    /deep/ .van-swipe-item {
      li:nth-child(2) {
        // margin: 0 0.36rem;
      }
      ul li {
        box-shadow: 0 0.02rem 0.0016667rem 0.0016667rem #e7e7e7;
        float: left;
        width: 2.933333rem;
        height: 4.826667rem;
        overflow: hidden;
        background: #ffffff;
        margin-left: 0.169333rem;
        margin-bottom: 0.266667rem;
        border-radius: 0.266667rem;
        position: relative;
        .back {
          overflow: hidden;
          width: 100%;
          height: 3.093333rem;
          background-color: #f8f8f7;
          border-radius: 0.266667rem;
          .one-hit {
            display: block;
            border-radius: 0.266667rem;
            margin: 0.296667rem auto;
            width: 2.6rem;
            height: 2.6rem;
          }
        }
        .text-one {
          font-size: 0.32rem;
          color: #000000;
          font-weight: 600;
          width: 2.733333rem;
          margin: 0 auto;
          height: 0.906667rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .money-Hot {
          font-weight: 600;
          margin-top: 0.206667rem;
          margin-left: 0.136667rem;
          font-size: 0.266667rem;
          color: #ea5454;
          span {
            font-size: 0.373333rem;
          }
        }
        .cart {
          position: absolute;
          right: 13%;
          bottom: 4%;
          width: 0.48rem;
          height: 0.426667rem;
        }
      }
    }
  }
  .ordinary {
    width: 9.9rem;
    height: 10.346667rem;
    margin: 0.4rem auto;
    position: relative;
    box-sizing: border-box;
    border-radius: 0.4rem;
    border: 0.04rem solid #ffffff;
    padding-top: 1.12rem;
    background: -webkit-linear-gradient(left, #de9fec, #8241c6);
    .image {
      position: absolute;
      top: -3%;
      width: 10rem;
      z-index: 99;
      height: 1.76rem;
    }
    .Boedx {
      width: 9.8rem;
      margin: 0.16rem auto 0;
      height: 4.24rem;
      overflow: hidden;
      // overflow: hidden;
      // overflow-y: hidden;
      // overflow-x: scroll;
      // display: flex;
    }
    ul {
      display: flex;
      margin-left: 0.26333rem;
      li {
        box-shadow: 0 0.02rem 0.0016667rem 0.0016667rem #e7e7e7;
        float: left;
        width: 2.586667rem;
        height: 4.24rem;
        overflow: hidden;
        background: #ffffff;
        margin-right: 0.16rem;
        margin-bottom: 0.266667rem;
        border-radius: 0.266667rem;
        position: relative;
        .back {
          overflow: hidden;
          width: 100%;
          background-color: #f8f8f7;
          border-radius: 0.266667rem;
          .one-hit {
            display: block;
            border-radius: 0.266667rem;
            margin: 0.296667rem auto;
            width: 2.16rem;
            height: 1.973333rem;
          }
        }
        .text-one {
          font-size: 0.32rem;
          color: #000000;
          font-weight: 600;
          width: 2.586667rem;
          margin: 0 auto;
          height: 0.4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .money-Hot {
          font-weight: 600;
          margin-left: 0.136667rem;
          font-size: 0.266667rem;
          color: #ea5454;
          span {
            font-size: 0.373333rem;
          }
        }
        .shop {
          margin: 0.096667rem auto 0;
          width: 2.026667rem;
          height: 0.48rem;
          text-align: center;
          line-height: 0.48rem;
          background: #8442c7;
          border-radius: 0.4rem;
          font-size: 0.32rem;
          color: #ffffff;
        }
        .cart {
          position: absolute;
          right: 13%;
          bottom: 4%;
          width: 0.48rem;
          height: 0.426667rem;
        }
      }
    }
  }
  .Hot {
    width: 9.9rem;
    margin: 1.4rem auto;
    position: relative;
    box-sizing: border-box;
    border-radius: 0.4rem;
    border: 0.04rem solid #ffffff;
    padding-top: 1.32rem;
    background: -webkit-linear-gradient(left, #ef95d5, #ea5ba6);
    .image {
      position: absolute;
      top: -9%;
      width: 10rem;
      z-index: 99;
      height: 1.76rem;
    }
    ul {
      overflow: hidden;
      margin-left: 0.23333rem;
      li {
        box-shadow: 0 0.02rem 0.0016667rem 0.0016667rem #e7e7e7;
        float: left;
        width: 2.266667rem;
        height: 3.513333rem;
        overflow: hidden;
        background: #ffffff;
        margin-right: 0.11rem;
        margin-bottom: 0.266667rem;
        border-radius: 0.266667rem;
        position: relative;
        .back {
          overflow: hidden;
          width: 100%;
          background-color: #f8f8f7;
          border-radius: 0.266667rem;
          .one-hit {
            display: block;
            border-radius: 0.266667rem;
            margin: 0.296667rem auto;
            width: 1.786667rem;
            height: 1.76rem;
          }
        }
        .text-one {
          font-size: 0.32rem;
          color: #000000;
          width: 2.266667rem;
          margin: 0 auto;
          line-height: 0.36rem;
          height: 0.706667rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .money-Hot {
          font-weight: 600;
          margin-left: 0.136667rem;
          font-size: 0.266667rem;
          color: #ea5454;
          span {
            font-size: 0.373333rem;
          }
        }
        .shop {
          margin: 0.096667rem auto 0;
          width: 2.026667rem;
          height: 0.48rem;
          text-align: center;
          line-height: 0.48rem;
          background: #8442c7;
          border-radius: 0.4rem;
          font-size: 0.32rem;
          color: #ffffff;
        }
        .cart {
          position: absolute;
          right: 13%;
          bottom: 4%;
          width: 0.48rem;
          height: 0.426667rem;
        }
      }
    }
  }
  // 活动规则弹窗
  .rule {
    z-index: 99;
    position: fixed;
    width: 1.573333rem;
    height: 0.533333rem;
    background-color: #f21b27;
    font-size: 0.32rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.533333rem;
    border-top-left-radius: 0.266667rem;
    border-bottom-left-radius: 0.266667rem;
    right: 0%;
    top: 4.16rem;
  }
  .boxed {
    width: 8.453333rem;
    height: 14.373333rem;
    border-radius: 0.266667rem;
    background: transparent;
    .backgrend {
      box-sizing: border-box;
      padding: 0.32rem;
      border-radius: 0.266667rem;
      text-indent: 1em;
      width: 8.453333rem;
      height: 12.373333rem;
      background: #f4f4f4;
      font-size: 0.48rem;
      color: #362c2c;
      overflow: auto;
      .gui {
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #362c2c;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
    }
    img {
      display: block;
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 5.44rem;
      height: 1.92rem;
    }
  }
  .close {
    margin: 0.366667rem auto 0;
    text-align: center;
    font-size: 0.48rem;
    line-height: 1.066667rem;
    color: #ffffff;
    width: 5.333333rem;
    height: 1.066667rem;
    border-radius: 0.533333rem;
    background: -webkit-linear-gradient(top, #f10e3a, #fc6e0c);
  }
  @keyframes mymove {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
  @-webkit-keyframes mymove /*Safari and Chrome*/ {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }
}
</style>
